<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户部门管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">用户信息后台系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="">日志系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">第三方服务系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">计费系统</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">扩展组件</a>
                <dl class="layui-nav-child">
                    <dd><a href="">云服务支撑</a></dd>
                    <dd><a href="">短信业务</a></dd>
                    <dd><a href="">邮件业务</a></dd>
                </dl>
            </li>


        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img" id="myHeader">
                    <span id="myName">测试</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="../info.html">个人信息</a></dd>
                    <dd><a href="">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="user.html">账户管理</a></dd>
                        <dd><a href="department.html">部门管理</a></dd>
                        <dd><a href="auth.html">权限管理</a></dd>
                        <dd class="layui-this"><a href="weather.html">天气管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">商品管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">规格管理</a></dd>
                        <dd><a href="javascript:;">参数管理</a></dd>
                        <dd><a href="">商品名称管理</a></dd>
                        <dd><a href="">商品信息管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">

            <span class="layui-breadcrumb">
              <a href="../index.html">首页</a>
              <a><cite>用户管理</cite></a>
              <a><cite>部门管理</cite></a>
            </span>

            <hr class="layui-bg-blue">

            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">   <!--  每一个这样的div代表一个面板状态 每一个面板会自动换行 -->
                        <label class="layui-form-label">城市天气</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search_cityName" placeholder="城市查询" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                        </div>
                    </div>
                </div>
            </fieldset>

            <table class="layui-hide" id="test" lay-filter="test"></table>



        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        ©2020-2021 CopyRight 捣蛋集团  www.dd.com
    </div>
</div>
<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../jquery/jquery-3.5.1.js"></script>
<script>

    $(function () {
        var user = localStorage.getItem("user");   // 字符串
        console.log(user);
        console.log(JSON.parse(user));
        user = JSON.parse(user);

        $("#myHeader").attr("src",user.headstr);            // jquery的处理办法    头像图片加载
        $("#myName").text(user.username);                    // jquery的处理办法    用户名加载

        // 重置按钮
        $("#iReset").click(function () {
            $("#search_cityName").val("");   // 设置value值
            search();
        });

        // 搜索按钮
        $("#searchVal").click(function () {
            var cityName = $("#search_cityName").val();   // 获取value值
            search(cityName);
            console.log(cityName);
        });

        // 默认渲染表格数据
        search();

        function search(cityName) {
            layui.use(['form','table'], function() {
                var table = layui.table;
                var form = layui.form;
                var json = {};
                if (cityName != null && cityName != "") {   // 如果搜索框中，用户传递了搜索值，则并且一个json条件数据
                    json.cityName = cityName;               // js中的动态属性添加
                    // 在json中添加一个key为username的值  {username: value}
                }
                // table默认数据渲染和分页处理
                table.render({                  // 渲染数据
                    elem: '#test'               // 获取table的id
                    ,response: {dataName: "result"}
                    , url: '/weather/select'    // 获取json数据2
                    , where: json               // 添加的请求查询参数
                    , toolbar: '#toolbarDemo'   //开启头部工具栏，并为其绑定左侧模板
                    , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '提示'
                        , layEvent: 'LAYTABLE_TIPS'
                        , icon: 'layui-icon-tips'
                    }]
                    , title: '天气数据表'
                    , cols: [[    // 每行中的列字段渲染   cols会根据返回的总条数进行循环处理   相当于我们java中的for循环  每次会把一条完整的json数据传递进来
                        {type: 'checkbox', fixed: 'left'}
                        , {
                            field: 'id',
                            title: 'ID',
                            width: 80,
                            fixed: 'left',
                            unresize: true,
                            sort: true,
                            templet: function (res) {
                                return '<em>' + res.id + '</em>'
                            }
                        }
                        , {
                            field: 'city', title: '城市名', width: 120, edit: 'text', templet: function (res) {
                                return '<em>' + res.city + '</em>'
                            }
                        }
                        ,{field:'info', title:'天气', width:180, templet: function(res){
                                return '<em>'+ res.realtime.info +'</em>'
                            }}
                        ,{field:'temperature', title:'温度', width:180, templet: function(res){
                                return '<em>'+ res.realtime.temperature +'</em>'
                            }}
                    ]]
                    , page: true
                });
                // 头工具栏事件
                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'insert_department':
                            // layer.msg("新增数据");
                            //弹出表单
                            layer.open({
                                type: 1
                                ,title: '新增部门'         //不显示标题栏
                                ,closeBtn: false
                                ,area: ['400px','250px']  // 宽和高
                                ,shade: 0.8               // 透明度
                                ,id: 'LAY_layuipro'       //设定一个id，防止重复弹出
                                ,btn: ['新增', '取消']    // 两个按钮显示的文字内容
                                ,btnAlign: 'c'           // 居中
                                ,moveType: 1             //拖拽模式，0或者1
                                ,content: $('#insert_form').html()// 引入自定义表单  对指定 script标记进行调用
                                ,success: function(layero){   // 初始化操作都是放置在这里的
                                    // 手动初始化form表单样式，并刷新select渲染
                                    form.render('select');
                                }
                                ,btn1: function(index, layero){   // 确定按钮
                                    let name = $("#insert_name").val();
                                    let number = $("#insert_number").val();
                                    $.ajax({   // 异步请求   想象成线程状态
                                        url:"/department/insert",   // 请求路径
                                        type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                        contentType:"application/json;charset=utf-8",
                                        datatype:"text",
                                        // request中传递的key-value值
                                        data:JSON.stringify({
                                            name:name,
                                            number:number,
                                        }),
                                        success:function(response){

                                            // layer.msg(response.msg);
                                            // if(response.code === 200) {   // === 衡等
                                            //     layer.close(index);   // 关闭当前对话框  基于传递过来的index值进行窗口关闭
                                            //     search();    // 新增成功之后，需要重新渲染一下table，让用户可以看到新增的数据
                                            // }

                                            if(response.code === 200) {
                                                layer.msg(response.msg);
                                                layer.close(index);
                                                search();
                                            }
                                            else if (response.code === 500) {
                                                alert("部门名或编号重复!")
                                            }
                                            console.log("数据: " + response);
                                        },
                                        error:function(response){             // 网络请求失败，自动调用此方法
                                            // layer.msg(response.msg);
                                            layer.msg("网络服务失败，请稍后重试!");
                                            // layer.close(index);   // 关闭当前对话框
                                        }
                                    });
                                }

                            });
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选');
                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    };
                });

                //监听行工具事件
                table.on('tool(test)', function(obj){
                    var data = obj.data;
                    // console.log(obj);
                    // console.log(obj.data);
                    if(obj.event === 'del'){
                        layer.confirm('真的删除行么', function(index){
                            $.ajax({   // 异步请求   想象成线程状态
                                url:"/department/deleteById",   // 请求路径
                                type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                datatype:"text",
                                // request中传递的key-value值
                                data:{
                                    id:data.id
                                },
                                success:function(response){
                                    layer.msg(response.msg);// 后台服务响应成功，自动返回数据
                                    if(response.code === 200) {
                                        layer.close(index);   // 关闭当前对话框
                                        search();
                                    }
                                },
                                error:function(response){             // 网络请求失败，自动调用此方法
                                    // console.log("出错" + response);
                                    layer.close(index);   // 关闭当前对话框
                                }
                            });
                        });



                    }else if(obj.event === 'edit'){
                        //弹出表单
                        layer.open({
                            type: 1
                            ,title: '更新用户'         //不显示标题栏
                            ,closeBtn: false
                            ,area: ['400px','250px']  // 宽和高
                            ,shade: 0.8               // 透明度
                            ,id: 'LAY_layuipro'       //设定一个id，防止重复弹出
                            ,btn: ['更新', '取消']    // 两个按钮显示的文字内容
                            ,btnAlign: 'c'
                            ,moveType: 1             //拖拽模式，0或者1
                            ,content: $('#insert_form').html()// 引入自定义表单,对指定 script标记进行调用
                            ,success: function(layero){// 初始化操作都是放置在这里的
                                $("#insert_name").val(data.name);
                                $("#insert_number").val(data.number);
                                // 手动初始化form表单样式，并刷新select渲染
                            }
                            ,btn1: function(index, layero){//确定按钮
                                let name = $("#insert_name").val();
                                let number = $("#insert_number").val();
                                $.ajax({   // 异步请求   想象成线程状态
                                    url:"/department/updateById",   // 请求路径
                                    type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                    contentType:"application/json;charset=utf-8",//通过json对象传递
                                    datatype:"text",
                                    // request中传递的key-value值
                                    data:JSON.stringify({
                                        id:data.id,
                                        name:name,
                                        number:number,
                                    }),
                                    success:function(response){
                                        layer.msg(response.msg);// 后台服务响应成功，自动返回数据
                                        if(response.code === 200) {
                                            // obj.update({//更新当前这行的记录（企业常用此方式）更新渲染处理，这样的好处在于，不用再次请求服务器刷新数据重新渲染，减少网络请求并发压力，提升网络延迟体验
                                            //     name:name,
                                            //     number:number,
                                            // })//这里完成不了
                                            layer.close(index);   // 关闭当前对话框 基于传递过来的index值进行窗口关闭
                                            search();// 新增成功之后，需要重新渲染一下table，让用户可以看到新增的数据（一般不用这种方式）
                                        }
                                    },
                                    error:function(response){// 网络请求失败，自动调用此方法
                                        layer.msg("网络服务失败，请稍后再试！");
                                        // console.log("出错" + response);
                                        // layer.close(index);   // 关闭当前对话框
                                    }
                                });

                            }

                        });
                    }
                });

            });
            //JS
            layui.use(['element', 'layer', 'util'], function(){
                var element = layui.element
                    ,layer = layui.layer
                    ,util = layui.util
                    ,$ = layui.$;

                //头部事件
                util.event('lay-header-event', {
                    //左侧菜单事件
                    menuLeft: function(othis){
                        layer.msg('展开左侧菜单的操作', {icon: 0});
                    }
                    ,menuRight: function(){
                        layer.open({
                            type: 1
                            ,title: '更多'
                            ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                            ,area: ['260px', '100%']
                            ,offset: 'rt' //右上角
                            ,anim: 5
                            ,shadeClose: true
                            ,scrollbar: false
                        });
                    }
                });

            });

        }

    });
</script>
</body>
</html>
